import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Dialogs 1.0
import QtQuick.XmlListModel 2.0
import QtQuick.Controls.Styles 1.0

Rectangle {
    id: rectangleSkillTable
    anchors.margins: 6
    color: "black"

    property int columnWidth: 35

    Text {
        id: textSkillsTitle
        text: "Skill Table"
        color: "white"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        font.pixelSize: 16
        font.bold: true
    }


    Rectangle {
        id: rectangleTitleRow

        anchors.top: textSkillsTitle.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 2
        anchors.topMargin: 6
        height: 20

        color: "darkred"
        border.color: "white"
        border.width: 1
        clip: true

        Row {
            anchors.fill: parent
            anchors.margins: 4
            spacing: 6

            Text {
                text: "Skill/Character Class"
                anchors.verticalCenter: parent.verticalCenter
                width: 160
                color: "white"
            }

            Repeater {
                model: characterClassesModel
                delegate: Text {
                    text: acronym
                    anchors.verticalCenter: parent.verticalCenter
                    width: columnWidth

                    color: "white"
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }

    } // rectangleTitleRow

    Rectangle {
        id: rectangleFooterRow

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 2
        anchors.topMargin: 6
        height: 20

        color: "navy"
        border.color: "white"
        border.width: 1
        clip: true

        Row {
            anchors.fill: parent
            anchors.margins: 4
            spacing: 6

            Text {
                text: "Total"
                anchors.verticalCenter: parent.verticalCenter
                width: 160
                color: "white"
            }

            Repeater {
                model: characterClassesModel
                delegate: Text {

                    text: classSkills.length;
                    anchors.verticalCenter: parent.verticalCenter
                    width: columnWidth

                    color: "white"
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }

    } // rectangleFooterRow

    ScrollView {
        id: scrollViewSkills
        anchors.top: rectangleTitleRow.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: rectangleFooterRow.top

        ListView {
            id: listViewSkills
            model: skillsModel

            delegate: Rectangle {
                id: rectangleSkillRow

                anchors.left: parent.left
                anchors.right: parent.right
                height: 20

                clip: true

                MouseArea {
                    id: mouseAreaSkillRow
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: { editIndex = index; }
                }


                Row {
                    anchors.fill: parent
                    anchors.margins: 4
                    spacing: 6

                    Text {
                        text: skillName + " (" + modelAttributes.get(keyAbility).attributeName.substring(0,3) + ")"
                        anchors.verticalCenter: parent.verticalCenter
                        width: 160
                        height: parent.height
                        color: "white"
                        font.bold: true
                        elide: Text.ElideMiddle
                        clip: true

//                        MouseArea {
//                            anchors.fill: parent
//                            onClicked: { editIndex = index; }
//                        }
                    }

                    Repeater {
                        model: characterClassesModel

                        delegate: Text {

                            text: classSkills.indexOf(skillName) >= 0 ? "cc" : "-"
                            anchors.verticalCenter: parent.verticalCenter
                            width: columnWidth

                            color: "white"
                            horizontalAlignment: Text.AlignHCenter

                        }
                    }
                }

                color: {
                    if (mouseAreaSkillRow.containsMouse || editIndex === index) {
                        "steelblue"
                    }
                    else if (index%2) {
                        "gray"
                    }
                    else {
                        "translparent"
                    }
                }

            } // rectangleTitleRow

        } // listViewSkills

    } // scrollViewSkills

}
